<script lang="ts" setup>
import { ref, defineAsyncComponent,watch, computed } from "vue";
import { useRoute, useRouter } from 'vue-router'
import { useAsyncRouteStore } from '@/store/modules/asyncRoute'

const asyncRouteStore = useAsyncRouteStore()
const keepAliveList = computed(() => asyncRouteStore.keepAliveComponents) 

const route = useRoute()
const router = useRouter()


const Login = defineAsyncComponent(() =>
  import("./components/login/login.vue")
)

const Register = defineAsyncComponent(() =>
  import("./components/register/register.vue")
)

let flag = ref<boolean>(true);

const login = () => {
	router.replace('/login')
};

const register = () => {
	router.replace('/register')
};
watch(() => route.path, (val) => {
	flag.value = val === '/register' ? false:  true;
}, {
	
	immediate:true
})

</script>

<template>
	<div class="login-page">
		<div class="login-box">
			<p class="title">校园失物招领系统</p>
			<div class="select">
				<div class="select-item">
					<p @click="login">用户登录</p>
				</div>

				<div class="select-item">
					<p @click="register">用户注册</p>
				</div>
			</div>
			<div
				class="line"
				:class="flag ? 'register-to-login' : 'login-to-register'"
			></div>
			<div class="content-box">
				<keep-alive :include="keepAliveList">
					<component :is="flag ? Login : Register" />
				</keep-alive>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";
.login-page {
	height: 100vh;
	width: 100vw;
	background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13712611924%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673863512&t=91ab30ae8ad26f93547310012e37cf07");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	// background: linear-gradient(
	// 	to bottom,
	// 	rgb(132, 136, 196),
	// 	rgb(154, 175, 158)
	// );
	overflow: hidden;
	.flex(row,center,center);
	.login-box {
		height: 485px;
		width: 500px;
		border: 2px solid #999;
		box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.3);

		// .flex(column,space-around,center);
		.title {
			// border: 1px solid #000;
			font-size: 26px;
			font-weight: bold;
			text-align: center;
			color: rgb(3, 180, 170);
			margin-top: 20px;
		}
		.select {
			width: 100%;

			// border: 1px solid #000;
			.flex(row,center,center);
			margin-top: 20px;
			.select-item {
				// height: 50px;
				.flex(column,center,center);
				flex: 1;

				p {
					font-size: 20px;
				}

				p:hover {
					cursor: pointer;
				}
			}
		}
		.line {
			margin-top: 3px;
			width: 80px;
			height: 3px;
			background: orange;
			// transform: translate(84px,0);
		}
		.login-to-register {
			transform: translate(332px, 0);
			transition: transform 1s ease;
		}
		.register-to-login {
			transform: translate(85px, 0);
			transition: transform 1s ease;
		}
		.content-box {
			// margin-top: 15px;
			height: 355px;
			width: 100%;
			border-bottom: 2px solid #333;
			.flex(column,center,center);
		}
	}
}
</style>
